<!--
 * @Description: 抽奖记录
-->
<template>
  <view class="bigbox">
    <view class="top">
      <!-- 重新加载图标 -->
      <u-icon
        color="black"
        name="reload"
        size="40"
        style="cursor: pointer"
        @click="handleReload"
      ></u-icon>
    </view>
    <view class="footer">
      <view class="btbox">
        <view class="txbox">
          <view class="xhz">中奖商品</view>
          <view class="xhz">中奖用户</view>
          <view class="xhz xhz2">中奖时间</view>
        </view>
      </view>
      <view class="nrbox">
        <template v-if="winPrizeList.length > 0">
          <view v-for="ele in winPrizeList" class="txbox kuai">
            <view class="xhz">{{ ele.name }}</view>
            <view class="xhz">{{ ele.phone }}</view>
            <view class="xhz xhz2">{{ formatTimestamp(ele.createTime) }}</view>
          </view>
          <!-- 返回顶部按钮 -->
          <u-back-top :scroll-top="scrollTop"></u-back-top>
        </template>
        <view v-else>
          <van-empty description="暂无内容" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick, watch } from 'vue'
import { onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
import { couponApi } from '@/api'
import { formatTimestamp, dateFormat } from '@/utils/index'
const shopId = ref('')
const userId = ref('')
const scrollTop = ref(0)
const winPrizeList = ref<any>([])
//返回顶部,所在的父盒子不能设置高度
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})
onLoad(async (option: any) => {
  if (option.shopId) {
    shopId.value = option.shopId
    await handleGetWinPrizeList()
    return
  }
  if (option.userId) {
    userId.value = option.userId
    await handleGetWinPrizeList2()
    return
  }
})
// 获取中奖记录列表-通过商家id
const handleGetWinPrizeList = async () => {
  uni.showLoading({ title: '加载中，请稍后', mask: true })
  try {
    const { data } = await couponApi
      .handleGetWinPrizeRecordListApi({
        shopId: shopId.value,
        noPaging: true
      })
      .finally(() => {
        uni.hideLoading()
      })
    // console.log('获取中奖记录列表', data)
    if (data.length > 0) {
      winPrizeList.value = data
    } else {
      winPrizeList.value = []
    }
  } catch (error) {
    console.log('获取中奖记录列表失败')
  }
}
// 获取中奖记录-通过用户id
const handleGetWinPrizeList2 = async () => {
  uni.showLoading({ title: '加载中，请稍后', mask: true })
  try {
    const { data } = await couponApi
      .handleGetWinPrizeRecordListApi({
        userId: userId.value,
        noPaging: true
      })
      .finally(() => {
        uni.hideLoading()
      })
    // console.log('获取中奖记录列表', data)
    if (data.length > 0) {
      winPrizeList.value = data
    } else {
      winPrizeList.value = []
    }
  } catch (error) {
    console.log('获取中奖记录列表失败')
  }
}
// 重新加载数据
const handleReload = () => {
  if (shopId.value) {
    handleGetWinPrizeList()
    return
  }
  if (userId.value) {
    handleGetWinPrizeList2()
    return
  }
}
</script>
<style lang="scss" scoped>
.bigbox {
  font-size: 24rpx;
  background-color: #fff;
  min-height: 100vh;
  padding: 20rpx;
  .top {
    margin-bottom: 20rpx;
    text-align: right;
  }
  .footer {
    .btbox {
      padding: 20rpx;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      border-bottom: 1rpx solid #ccc;
    }
    .nrbox {
      .kuai {
        padding: 20rpx;
        border-bottom: 1rpx solid #ccc;
        margin-bottom: 10rpx;
      }
    }
  }

  .txbox {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    .xhz {
      width: 30%;
      margin-bottom: 10rpx;
    }
    .xhz2 {
      width: 40%;
    }
  }
}
</style>
